<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人中心</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="头像" prop="avatar">
          <Upload v-model="form.avatar" @clear="clearImageValidate" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { getInfo, updateUserCenter } from "@/api/login";

import Upload from "@/components/Upload";

export default {
  name: "UserCenter",
  components: {
    Upload
  },
  data() {
    return {
      oldPassword: "",
      form: {
        avatar: "",
        password: ""
      },
      // 表单校验
      rules: {
        avatar: [{ required: true, message: "请上传头像", trigger: "blur" }],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getEditInfo();
  },
  methods: {
    clearImageValidate() {
      this.rules.avatar = [];
      this.$refs["form"].clearValidate("avatar");
    },
    getEditInfo() {
      getInfo().then(response => {
        this.form = response.user;
        this.oldPassword = this.form.password;
      });
    },

    /** 提交按钮 */
    submitForm() {
      if (this.oldPassword === this.form.password) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUserCenter(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$router.go(-1);
              }
            });
          }
        });
      } else {
        this.$confirm("修改密码需要重新登录", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$refs["form"].validate(valid => {
            if (valid) {
              updateUserCenter(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.$store.dispatch("LogOut").then(() => {
                    location.href = "/index";
                  });
                }
              });
            }
          });
        });
      }
    },
    // 重置按钮
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.item {
  font-size: 14px;
  padding: 18px 0;
  span:first-child {
    width: 90px;
    display: inline-block;
    text-align: right;
  }
  span:last-child {
    margin-left: 20px;
    display: inline-block;
  }
  .image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}
.deatil {
  display: flex;
  .avatar {
    width: 140px;
    height: 140px;
    margin-right: 20px;
    .img {
      height: 100%;
    }
    /deep/ img {
      border-radius: 50%;
    }
  }
  .info {
    flex: 1;
  }
}
</style>
